<template>
  <div class="subpage">
    <my-head title="注册" :back="true"></my-head>
    <van-form ref="form" @submit="onSubmit" @failed="onFail" class="form">
      <van-field
        v-model="form.username"
        name="username"
        clearable
        label="用户名"
        placeholder="请输入用户名"
        :rules="[{ required: true, message: '请输入用户名' }]"
      />
      <van-field
        v-model="form.phone"
        name="phone"
        clearable
        label="手机号"
        placeholder="请输入手机号"
        :rules="[
          { required: true, message: '请输入手机号' },
          { pattern: reg.phone, message: '请输入正确手机号' },
        ]"
      />
      <van-field
        v-model="form.email"
        name="email"
        clearable
        label="电子邮箱"
        placeholder="请输入电子邮箱"
        :rules="[
          { required: true, message: '请输入电子邮箱' },
          { pattern: reg.email, message: '请输入有效邮箱' },
        ]"
      />
      <van-field
        v-model="form.password"
        :type="type"
        clearable
        name="password"
        label="密码"
        placeholder="请输入密码"
        :right-icon="type == 'password' ? 'closed-eye' : 'eye-o'"
        :rules="[
          { required: true, message: '请输入密码' },
          { validator: checkPass, message: '请输入6-16的数字和字符的组合密码' },
        ]"
        @click-right-icon="changeType"
        @blur="checkDbPass"
      />
      <van-field
        v-model="form.dbpassword"
        :type="type1"
        clearable
        name="dbpassword"
        label="确认密码"
        placeholder="请输入确认密码"
        :right-icon="type1 == 'password' ? 'closed-eye' : 'eye-o'"
        :rules="[
          { required: true, message: '请输入确认密码' },
          { pattern: reg.pwd, message: '请输入6-16的数字和字符的组合密码' },
          { validator: checkPassEqual, message: '2次密码不一致' },
        ]"
        @click-right-icon="changeType1"
      />
      <div style="margin: 16px" class="links">
        <p>
          <router-link class="color1" :to="{ name: 'login' }"
            >已有帐号 去登录</router-link
          >
          >
        </p>
        <p>
          <router-link class="color2" :to="{ name: 'forgetpass' }"
            >忘记密码?</router-link
          >
        </p>
      </div>
      <div style="margin: 36px 16px">
        <van-button block type="warning" native-type="submit"
          >注册帐号</van-button
        >
      </div>
    </van-form>
  </div>
</template>



<script>
export default {
  data() {
    return {
      form: {},
      type: "password",
      type1: "password",
    };
  },
  mounted() {
    // this.$axios.get("http://localhost:3000/test").then((res) => {
    //   console.log(res);
    // });
    // async + await
    // this.$ajax.test({ id: 1 }).then((res) => {});
    this.getTest();
  },
  methods: {
    // async + await 必须配合使用
    async getTest() {
      let res = await this.$ajax.test({ id: 2110 });
    },
    checkDbPass() {
      // 校验二次密码
      if (this.reg.pwd.test(this.form.dbpassword)) {
        this.$refs.form.validate("dbpassword");
      }
    },
    checkPassEqual() {
      if (this.reg.pwd.test(this.form.password)) {
        return this.form.password == this.form.dbpassword;
      }
    },

    checkPass(val) {
      return this.reg.pwd.test(val);
    },

    changeType() {
      this.type = this.type == "password" ? "text" : "password";
    },
    changeType1() {
      this.type1 = this.type1 == "password" ? "text" : "password";
    },
    onSubmit(value) {
      console.log(value);
      // 先判断是否已经注册
      // 没有才能注册
      this.$ajax
        .findUser({
          phone: value.phone,
          username: value.username,
        })
        .then((res) => {
          if (res.length > 0) {
            // 已经注册了
            this.$toast("当前用户已经注册,请重新注册");
          } else {
            this.$ajax.addUser(value).then((res) => {
              this.$notify({ type: "success", message: "注册成功" });
              this.$nextTick(() => {
                this.$router.push({
                  name: "login",
                  query: { username: value.username },
                });
              });
            });
          }
        });
    },
    onFail() {
      this.$toast("输入错误，请重新输入");
    },
  },
};
</script>


<style lang="scss" scoped>
.form {
  margin-top: 20px;
  .links {
    display: flex;
    justify-content: space-between;
  }
  .color1 {
    color: rgb(247, 2, 2);
  }
  .color2 {
    color: rgb(247, 2, 2);
  }
}
</style>
